<template>
	<view class="content-header">
		<view class="header">
			<view class="top20"></view>
			<scroll-view scroll-x="true" class="scroll-body flex-row">
				<view class="flex-row flex-wrap-no flex-wrap-no tab">
					<view v-for="(tab,index) in orderList" class="tab-ones" @tap="changeTab(index)">
						<view :class="index==tabCode?`action`:``">{{tab.name}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view v-if="orderList[tabCode].data.length==0">
			<image class="not-img" src="../../static/cart/nothas.png" mode="scaleToFill"></image>
			<view class="not-txt">暂无订单数据</view>
		</view>
		<view v-if="orderList[tabCode].data.length>0" class="flex-column">
			<scroll-view :scroll-y="true" class="has-scroll" @scrolltolower="getOrderList" lower-threshold="200">
				<view class="top17"></view>
				<view class="has-data-header">
					<view v-for="item in orderList[tabCode].data" class="has-data" @tap="gotoInfo(item)">
						<view class="flex-column has-data-top">
							<view class="flex-row flex-content-between has-data-time">
								<view>订单时间：{{item.createtime}}</view>
								<view>{{getStatusTitle(item.status)}}</view>
							</view>
							<view class="flex-row flex-content-between has-goods" v-for="good in item.orderitem">
								<view class="flex-row">
									<image class="goods-img" :src="$utils.cdnImg(good.image)" mode="widthFix"></image>
									<view class="flex-column has-goods-price">
										<view>{{good.title}}</view>
										<view class="tags">
											<view class="flex-row tags-buttons">
												<view v-for="tag in good.goods.tags">{{tag.title}}</view>
												<!-- <view>5折</view> -->
											</view>
											<!-- <view v-if="tag in good.tags">{{tag.title}}</view> -->
										</view>
										<view>￥{{good.price}}</view>
									</view>
								</view>
								<view class="flex-column-reverse">
									<view class="has-goods-txt">x{{good.num}}</view>
								</view>
							</view>
							<!-- <view class="flex-row flex-content-between has-goods">
								<view class="flex-row">
									<image class="goods-img" src="../../static/index/goods.png" mode="widthFix"></image>
									<view class="flex-column has-goods-price">
										<view>精品五花肉500g</view>
										<view>￥2800</view>
									</view>
								</view>
								<view class="flex-column-reverse">
									<view class="has-goods-txt">x1</view>
								</view>
							</view> -->
							<view class="flex-row flex-content-between has-data-money">
								<view>实付款：</view>
								<view>￥{{item.total_money}}</view>
							</view>
							<view class="flex-row flex-content-between bnt">
								<view></view>
								<view class="flex-row bnt-pay">
									<view v-for="btn in getStatusButtons(item.status)">
										<view v-if="btn==`cancellation`" class="quxiao" @tap.stop="quxiao(item)">取消订单</view>
										<view v-if="btn==`refund`" class="quxiao" @tap.stop="goTorefut(item,'退款')">退款</view>
										<view v-if="btn==`payment`" class="xuanz" @tap.stop="payOrder(item)">支付订单</view>
										<view v-if="btn==`confirm_receipt`" class="xuanz" @tap.stop="quern(item)">确认收货</view>
										<view v-if="btn==`comment`" class="xuanz" @tap.stop="pingjia(item)">评论</view>
										<view v-if="btn==`del`" class="quxiao" @tap.stop="shanc(item)">删除</view>
										<view v-if="btn==`sales`" class="quxiao" @tap.stop="goTorefut(item,'售后')">售后</view>
										<view v-if="btn==`wuliu`" class="xuanz" @tap.stop="showWuliu(item)">查看物流</view>
									</view>
									
								</view>
							</view>
						</view>

					</view>
				</view>
			</scroll-view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabCode: 0,
			}
		},
		onLoad(opt) {
			if (opt.tabCode) {
				if (opt.tabCode == 'all') {
					this.tabCode = 0;
				} else {
					this.tabCode = opt.tabCode;
				}
			}
			this.$store.dispatch("getOrderList")
		},
		computed: {
			orderList() {
				return this.$store.state.order.orderList
			},
			statusList() {
				return this.$store.state.order.statusList
			}
		},
		onBackPress() {
			uni.switchTab({
				url: '/pages/tabbar/user'
			})
			return true
		},
		methods: {
			//取消订单
			quxiao(item){
				console.log(item);
				let that = this;
				uni.showModal({
					title:"提示",
					content:"确认取消订单吗?",
					success(config) {
						if(config.confirm){
							that.$api.cancellationOrder({
								order_num:item.order_num
							}).then(res=>{
								that.$utils.showMessage("取消成功",()=>{
									that.$store.dispatch("getOrderList")
									that.$store.dispatch("getOrderStatus")
								})
							})
						}
					}
				})
			},
			//获取状态按钮
			getStatusButtons(status) {
				let statusList = this.statusList
				// console.log(statusList[status]);
				if (statusList[status]) {
					return statusList[status].buttons
				}
				return []
			},
			//获取状态名称
			getStatusTitle(status) {
				let statusList = this.statusList
				if (statusList[status]) {
					return statusList[status].name
				}
				return ""
			},
			//确认收货
			quern(item){
				let that = this
				uni.showModal({
					title:"提示",
					content:"确认已经收到货!",
					success(conig) {
						if(conig.confirm){
							that.$api.confimOrder({
								order_num:item.order_num
							}).then(res=>{
								that.$utils.showMessage("收货成功",()=>{
									that.$store.dispatch("getOrderList")
									that.$store.dispatch("getOrderStatus")
								})
							})
						}
					}
				})
				
			},
			//跳转到详情
			gotoInfo(item) {
				uni.navigateTo({
					url: '/pages/order/order_info?order_num='+item.order_num
				})
			},
			//到评论
			pingjia(item) {
				uni.navigateTo({
					url: '/pages/goods/evaluate?order_num='+item.order_num
				})
			},
			//查看物流
			showWuliu(item) {
				uni.navigateTo({
					url: '/pages/order/order_wuliu?order_num='+item.order_num
				})
			},
			//到退款
			goTorefut(item,title) {
				uni.navigateTo({
					url: '/pages/order/refund_order?title='+title+"&order_num="+item.order_num
				})
			},
			//tab的修改
			changeTab(index) {
				this.tabCode = index
			},
			//去支付
			payOrder(item) {
				uni.navigateTo({
					url: '/pages/order/pay_order?order_num='+item.order_num
				})
			},
			//获取订单详情
			getOrderList(){
				let tabCode = this.tabCode;
				// console.log(tabCode);
				this.$store.dispatch("getOrderList",tabCode);
			},
			//删除订单
			shanc(item){
				let that = this;
				uni.showModal({
					title:"提示",
					content:"确定删除订单吗?",
					success(config) {
						if(config.confirm){
							that.$api.delOrder({
								order_num:item.order_num
							}).then(res=>{
								that.$utils.showMessage("删除成功",()=>{
									that.$store.dispatch("getOrderList")
									that.$store.dispatch("getOrderStatus")
								})
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.tags {
		height: 40rpx;

		.tags-buttons {
			margin-top: 10rpx;

			>view {
				height: 38rpx;
				background: #FFFFFF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				opacity: 1;
				border: 1px solid #FF5000;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FF5000;
				margin-right: 5rpx;
				padding-left: 5rpx;
				padding-right: 5rpx;
				text-align: center;
			}
		}
	}

	.quxiao {
		// width: 170rpx;
		// height: 60rpx;
		// background: #EFEFEF;
		// border-radius: 30rpx 30rpx 30rpx 30rpx;
		// opacity: 1;
		// font-size: 26rpx;
		// font-family: PingFang SC-Regular, PingFang SC;
		// font-weight: 400;
		// color: #666666;
		// text-align: center;
		// line-height: 60rpx;
		// margin-right: 10rpx;
		
		width: 170rpx;
		height: 60rpx;
		background: #EFEFEF;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		opacity: 1;
		margin-right: 10rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		text-align: center;
		line-height: 60rpx;
	}

	.xuanz {
		width: 170rpx;
		height: 60rpx;
		background: linear-gradient(90deg, $default-button-color 0%, $default-button-end-color 100%);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		opacity: 1;
		margin-right: 10rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: $default-button-foncolor;
		text-align: center;
		line-height: 60rpx;
	}

	// .bnt-pay{
	// 	>view:nth-child(1){
	// 		width: 170rpx;
	// 		height: 60rpx;
	// 		background: #EFEFEF;
	// 		border-radius: 30rpx 30rpx 30rpx 30rpx;
	// 		opacity: 1;
	// 		font-size: 26rpx;
	// 		font-family: PingFang SC-Regular, PingFang SC;
	// 		font-weight: 400;
	// 		color: #666666;
	// 		text-align: center;
	// 		line-height: 60rpx;
	// 	}
	// 	>view:nth-child(2){
	// 		width: 170rpx;
	// 		height: 60rpx;
	// 		background: linear-gradient(90deg, $default-button-color 0%, $default-button-end-color 100%);
	// 		border-radius: 40rpx 40rpx 40rpx 40rpx;
	// 		opacity: 1;
	// 		margin-left: 20rpx;
	// 		font-size: 26rpx;
	// 		font-family: PingFang SC-Regular, PingFang SC;
	// 		font-weight: 400;
	// 		color: $default-button-foncolor;
	// 		text-align: center;
	// 		line-height: 60rpx;
	// 	}
	// }
	.bnt {
		margin-top: 28rpx;
	}

	.has-data-money {
		margin-top: 28rpx;

		>view:nth-child(1) {
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}

		>view:nth-child(2) {
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}
	}

	.has-goods-txt {
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.has-goods-price {
		margin-left: 18rpx;

		>view:nth-child(1) {
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}

		>view:nth-child(3) {
			font-size: 30rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-top: 30rpx;
		}
	}

	.goods-img {
		width: 172rpx;
	}

	.has-goods {
		margin-top: 40rpx;
		border-bottom: 1px solid #EFEFEF;
		padding-bottom: 30rpx;
	}

	.has-data-top {
		// margin-top: 27rpx;
		padding-top: 27rpx;
		margin-left: 20rpx;
		margin-right: 30rpx;
	}

	.has-data-time {
		>view:nth-child(1) {
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		>view:nth-child(2) {
			font-size: 26rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #ED5126;
		}
	}

	.top17 {
		width: 100%;
		height: 17rpx;
	}

	.has-data {
		width: 690rpx;
		// height: 492rpx;
		background-color: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		padding-bottom: 30rpx;
		margin-bottom: 20rpx;
	}

	.has-data-header {
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-bottom: 17rpx;
	}

	/* #ifdef H5 */
	.has-scroll {
		width: 750rpx;
		height: calc(100vh - 198rpx);
		// background-color: #69D330;
	}

	/* #endif */
	/* #ifdef APP-PLUS */
	.has-scroll {
		width: 750rpx;
		height: calc(100vh - 98rpx);
		// background-color: #69D330;
	}

	/* #endif */

	.not-txt {
		margin-top: 20rpx;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	.not-img {
		width: 260rpx;
		height: 260rpx;
		margin-top: 210rpx;
		margin-left: 255rpx;
	}

	.action {
		color: #69D330 !important;
		border-bottom: 6rpx solid #69D330;
	}

	.tab-ones {
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 80rpx;
		margin-right: 58rpx;
	}

	.tab {
		// margin-left: 62rpx;
		white-space: nowrap;
	}

	.scroll-body {
		width: 640rpx;
		height: 80rpx;
		margin-left: 62rpx;
	}

	.header {
		width: 750rpx;
		height: 100rpx;
		background-color: #FFFFFF;
	}
</style>